<template>
  <div id="app">
    <div class="card" v-for="item in stuData" :key="item.name">
      <div class="content">
        <div class="img">
          <img v-bind:src="item.head" alt="" />
        </div>
        <span>姓名：{{ item.name }}</span>
        <span>年龄：{{ item.age }}</span>
        <span>性别：{{ item.sex }}</span>
        <span>总分:{{ item.yw + item.sx + item.yy }}</span>
      </div>
      <div class="score" v-if="(item.yw >= 60) & (item.sx >= 60) & (item.yy >= 60)">
        <div class="nav">---</div>
        <span>语文：{{ item.yw }}</span>
        <span>数学：{{ item.sx }}</span>
        <span>英语：{{ item.yy }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import "../assets/css/loading.css"
export default {
    setup(){

       const stuData=[
            {
              name: '张三',
              age: 20,
              sex: '男',
              head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2Fc8%2F5d%2F59%2Fc85d595ed206fa63bb7bc7d7d9d17353.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=0999eef6cf2f4a0da0f06a37153f3a30',
              yw: 60,
              sx: 100,
              yy: 70,
            },
            {
              name: '李四',
              age: 20,
              sex: '男',
              head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F36%2Faf%2F84%2F36af84b51d35d4e560fb92fa065fe1d6.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=d24abc41a0a5bc533cf0d8e42257a3c1',
              yw: 50,
              sx: 100,
              yy: 40,
            },
            {
              name: '王五',
              age: 20,
              sex: '男',
              head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F22%2Fa6%2F5d%2F83%2Fae689318a827319a98788026bb32d99a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=b85a8b7e9a853d96055aab2182fd4379',
              yw: 80,
              sx: 100,
              yy: 60,
            },
          ]

          return{
            stuData
          }
    }
}
</script>